import React, { useState } from 'react';
import { Card, Tabs, Form, Input, Button, Upload, Avatar, message, Row, Col, Statistic } from 'antd';
import { UserOutlined, UploadOutlined, MailOutlined, PhoneOutlined, EditOutlined } from '@ant-design/icons';
import useAuthStore from '../../stores/authStore';
import './index.scss';

const { TabPane } = Tabs;

const Profile = () => {
  const { user, updateProfile } = useAuthStore();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const handleUpdateProfile = async (values) => {
    try {
      setLoading(true);
      await updateProfile(values);
      message.success('个人信息更新成功');
    } catch {
      message.error('更新失败');
    } finally {
      setLoading(false);
    }
  };

  const uploadProps = {
    name: 'file',
    action: '/api/upload',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };

  const renderBasicInfo = () => (
    <Card title="基本信息">
      <Row gutter={[24, 24]}>
        <Col xs={24} md={8}>
          <div className="avatar-section">
            <Avatar
              size={120}
              src={user?.avatar}
              icon={<UserOutlined />}
            />
            <Upload {...uploadProps}>
              <Button icon={<UploadOutlined />} style={{ marginTop: 16 }}>
                更换头像
              </Button>
            </Upload>
          </div>
        </Col>
        <Col xs={24} md={16}>
          <Form
            form={form}
            layout="vertical"
            initialValues={{
              nickname: user?.nickname,
              email: user?.email,
              bio: user?.bio,
            }}
            onFinish={handleUpdateProfile}
          >
            <Form.Item
              name="nickname"
              label="昵称"
              rules={[
                { required: true, message: '请输入昵称' },
                { max: 20, message: '昵称不能超过20位' },
              ]}
            >
              <Input prefix={<UserOutlined />} placeholder="请输入昵称" />
            </Form.Item>

            <Form.Item
              name="email"
              label="邮箱"
              rules={[
                { required: true, message: '请输入邮箱' },
                { type: 'email', message: '邮箱格式不正确' },
              ]}
            >
              <Input prefix={<MailOutlined />} placeholder="请输入邮箱" />
            </Form.Item>

            <Form.Item
              name="mobile"
              label="手机号"
              rules={[
                { required: true, message: '请输入手机号' },
                { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' },
              ]}
            >
              <Input prefix={<PhoneOutlined />} placeholder="请输入手机号" />
            </Form.Item>

            <Form.Item
              name="bio"
              label="个人简介"
              rules={[
                { max: 200, message: '简介不能超过200字' },
              ]}
            >
              <Input.TextArea
                rows={4}
                placeholder="请输入个人简介"
                showCount
                maxLength={200}
              />
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" loading={loading}>
                保存修改
              </Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
    </Card>
  );

  const renderAccountInfo = () => (
    <Card title="账户信息">
      <Row gutter={[16, 16]}>
        <Col xs={12} md={6}>
          <Statistic
            title="用户名"
            value={user?.username}
            prefix={<UserOutlined />}
          />
        </Col>
        <Col xs={12} md={6}>
          <Statistic
            title="角色"
            value={user?.role === 'student' ? '学生' : user?.role === 'teacher' ? '教师' : '管理员'}
          />
        </Col>
        <Col xs={12} md={6}>
          <Statistic
            title="等级"
            value={user?.level || 1}
            suffix="级"
          />
        </Col>
        <Col xs={12} md={6}>
          <Statistic
            title="经验值"
            value={user?.experience || 0}
          />
        </Col>
      </Row>
    </Card>
  );

  const renderSecurity = () => (
    <Card title="安全设置">
      <div className="security-item">
        <div className="security-info">
          <h4>修改密码</h4>
          <p>定期修改密码可以保护账户安全</p>
        </div>
        <Button type="primary">修改密码</Button>
      </div>
      
      <div className="security-item">
        <div className="security-info">
          <h4>绑定邮箱</h4>
          <p>已绑定：{user?.email || '未绑定'}</p>
        </div>
        <Button>修改邮箱</Button>
      </div>
    </Card>
  );

  return (
    <div className="profile-page">
      <div className="profile-header">
        <h1>个人中心</h1>
        <p>管理您的个人信息和账户设置</p>
      </div>

      <Tabs defaultActiveKey="basic" size="large">
        <TabPane tab="基本信息" key="basic">
          {renderBasicInfo()}
        </TabPane>
        <TabPane tab="账户信息" key="account">
          {renderAccountInfo()}
        </TabPane>
        <TabPane tab="安全设置" key="security">
          {renderSecurity()}
        </TabPane>
      </Tabs>
    </div>
  );
};

export default Profile; 